<template>
    <!-- 添加用户 -->
    <addrole v-model="dialogFormVisible" @reacquire="acquire"></addrole>
    <!-- 删除用户 -->
    <delrole v-model="dialogVisible"></delrole>
    <!-- 分配用户 -->
    <rDialog v-model="dialogTableVisible" @reacquire="acquire"></rDialog>
    <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
        <el-table-column prop="unid" label="id">
            <template #default="{ row }">
                <el-tag size:="large" class="mx-1" effect="dark" round>
                    {{ row.unid }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="headimgurl" label="头像">
            <template #default="{ row }">
                <img :src="row.headimgurl" style="height:50px;" />

            </template>
        </el-table-column>
        <el-table-column prop="username" label="昵称">
            <template #default="{ row }">
                <el-tag size:="large" type="info" class="mx-1" effect="dark" round>
                    {{ row.nickname }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="city" label="角色描述">
            <template #default="{ row }">
                <el-tag size:="large" type="warning" class="mx-1" effect="dark" round>
                    {{ row.roleName }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
            <template #default="{ row }">
                <b v-if="row.sex == 0">女</b>
                <b v-else>男</b>
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
            <template #default="{ row }">
                <el-tag size:="large" type="success" class="mx-1" effect="dark" round>
                    {{ row.phone }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="用户状态">
            <template #default="{ row }">
                <el-switch @change="handleSwitchChange(row)" v-model="row.status" class="ml-2" inline-prompt size="large" active-value="1"
                    inactive-value="0" style="--el-switch-on-color: #1390ca; --el-switch-off-color: #ff4949"
                    active-text="启用" inactive-text="禁用" /></template>
        </el-table-column>
        <el-table-column prop="phon" label="操作">
            <template #default="{ row }">
                <el-dropdown split-button type="primary" trigger="click" >
                    操作
                    <template #dropdown>
                        <el-dropdown>
                            <el-button type="primary" @click="adduser">添加用户</el-button>
                        </el-dropdown>
                        <el-dropdown>
                            <el-button type="success" @click="edit">编辑用户</el-button>
                        </el-dropdown>
                       
                        <el-dropdown>
                            <el-button type="danger" @click="deluser">删除用户</el-button>
                        </el-dropdown>
                       
                        <el-dropdown>
                            <el-button type="warning" @click="allocation(row)">分配角色</el-button>
                        </el-dropdown>
                    </template>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <sDrawer v-model:show="showDrawer"></sDrawer>
</template>
<script setup>
import { ref, onMounted } from "vue"
// 引入用户列表请求
import { getUsersListApi, updateUserApi } from "@/api/users.js"
// 引入抽屉组件
import sDrawer from "@/components/sDrawer/index.vue"
// 引入增加表格组件
import addrole from "./adduser.vue"
// 引入删除表格组件
import delrole from "./deluser.vue"
import { ElMessage } from "element-plus"
// 引入封装的判断节点是否是父级节点的方法
import isChild from "@/utils/isChild"
// 引入userStore
import useUser from "@/store/users"
// 引入角色的store
import useRole from "@/store/role"
// 引入分配角色的dialog
import rDialog from "@/components/rDialog/index.vue"
// 引入角色描述的store
import useRoleName from "@/store/roleName"
// 使用角色描述的store
let roleNameStore = useRoleName()
// 使用角色的store
let roleStore = useRole()
// 使用userStore
let userStore = useUser()
// 声明控制抽屉显示与隐藏的变量
const showDrawer = ref(true)
const tableData = ref([])
const headimgurl = ref([])
// 声明switch的status
let status = ref(true)
// 声明添加dialog的显示隐藏的变量
let dialogFormVisible = ref(false)
// 声明删除的dialog的显示隐藏的变量
let dialogVisible = ref(false)
// 声明分配角色的dialog的显示隐藏的变量
let dialogTableVisible = ref(false)
// 声明控制table的loading的变量
const tableLoading = ref(false)
// 封装获取用户列表函数
let getUsersList = async () => {
    // {order_by:'-1'}
    tableLoading.value = true
    try {
        let res = await getUsersListApi({order_by:'-1'  })
        // console.log(res.data.data);
        tableData.value = res.data.data
        tableLoading.value = false
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}
// 触发父组件重新获取列表的方法
let acquire = () => {
    getUsersList()
    // console.log('子组件调用父组件的函数');
}
// 添加用户
let adduser = () => {
    dialogFormVisible.value = true
}
// 删除用户逻辑
let deluser = () => {
    alert('没写呢还')
    // dialogVisible.value = true

}

// 声明点击状态按钮切换用户状态
let handleSwitchChange = async (row) => {
    // console.log(row.parentid);
    try {
        await updateUserApi({ unid: row.unid, status: row.status })
        if (row.status === '1') {
            ElMessage.success(row.username + '用户已启用')
        } else {
            ElMessage.error(row.username + '用户已禁用')
        }
    } catch (e) {
        console.log(e);
    }
}
// 分配角色的逻辑
let allocation = async (row) =>{
    // console.log(row.unid);
    // 给角色描述赋值
    roleNameStore.roleDesc=row.roleName
    // 给角色unid赋值
    roleNameStore.unid = row.unid
    dialogTableVisible.value = true
}
// 编辑逻辑
let edit = () => {
    dialogFormVisible.value = true
}
// 获取用户列表
onMounted(() => {
    getUsersList()
})
</script>

